import React, { useState } from "react";
import CommonDisplayPanel from "../components/CommonDisplayPanel";
import { Switch, Divider } from "antd";

const CommonDisplayPanelDemo: React.FC = () => {
  const handleDeleteClick = () => {
    alert("删除人员确认面板被点击！");
  };

  const handleLimitClick = () => {
    alert("人员上限面板被点击！");
  };

  const [isLoading, setIsLoading] = useState(false);

  const toggleLoading = (checked: boolean) => {
    setIsLoading(checked);
  };

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        gap: "24px",
        padding: "24px",
      }}
    >
      <div>
        <h2>标准尺寸图标</h2>
        <div style={{ display: "flex", gap: "16px" }}>
          <CommonDisplayPanel
            svgIcon="DeleteUserConfirm"
            title="删除人员确认"
            description="点击此面板以确认删除人员操作。"
            onClick={handleDeleteClick}
            width={300}
          />
          <CommonDisplayPanel
            svgIcon="UserLimitReached"
            title="人员上限提示"
            description="当前团队人员已达到上限，无法添加更多成员。"
            onClick={handleLimitClick}
            width={300}
          />
        </div>
      </div>

      <div>
        <h2>自定义尺寸图标</h2>
        <div style={{ display: "flex", gap: "16px" }}>
          <CommonDisplayPanel
            svgIcon="DeleteUserConfirm"
            title="小图标面板"
            description="使用较小的图标尺寸 (60x60)。"
            onClick={handleDeleteClick}
            width={300}
            imageSize={60}
          />
          <CommonDisplayPanel
            svgIcon="UserLimitReached"
            title="大图标面板"
            description="使用较大的图标尺寸 (150x150)。"
            onClick={handleLimitClick}
            width={300}
            imageSize={150}
          />
        </div>
      </div>

      <div>
        <h2>自定义描述文字样式</h2>
        <div style={{ display: "flex", gap: "16px" }}>
          <CommonDisplayPanel
            svgIcon="DeleteUserConfirm"
            title="重要提示"
            description="这是一条重要的提示信息，使用红色字体强调。"
            onClick={handleDeleteClick}
            width={300}
            descriptionStyle={{
              color: "red",
              fontWeight: "bold",
            }}
          />
          <CommonDisplayPanel
            svgIcon="UserLimitReached"
            title="细小提示"
            description="这是一条次要的提示信息，使用较小的灰色字体展示。"
            onClick={handleLimitClick}
            width={300}
            descriptionStyle={{
              fontSize: "12px",
              color: "#999",
              fontStyle: "italic",
            }}
          />
        </div>
      </div>

      <div>
        <h2>多行文本与自定义行高</h2>
        <div style={{ display: "flex", gap: "16px" }}>
          <CommonDisplayPanel
            svgIcon="DeleteUserConfirm"
            title="紧凑布局"
            description="这是一段较长的描述文本，设置了较小的行高，适合需要展示更多内容的场景。这是一段较长的描述文本，设置了较小的行高。"
            width={300}
            descriptionStyle={{
              lineHeight: 1.2,
              fontSize: "13px",
            }}
          />
          <CommonDisplayPanel
            svgIcon="UserLimitReached"
            title="宽松布局"
            description="这是一段较长的描述文本，设置了较大的行高，提高可读性。这是一段较长的描述文本，设置了较大的行高，提高可读性。"
            width={300}
            descriptionStyle={{
              lineHeight: 2,
              fontSize: "14px",
            }}
          />
        </div>
      </div>

      <div>
        <h2>加载状态图标</h2>
        <div style={{ marginBottom: "16px" }}>
          <Switch checked={isLoading} onChange={toggleLoading} />
          <span style={{ marginLeft: "8px" }}>切换加载状态</span>
        </div>
        <div style={{ display: "flex", gap: "16px" }}>
          <CommonDisplayPanel
            svgIcon="DeleteUserConfirm"
            title="加载中面板"
            description="当isLoading为true时，图标会旋转显示加载状态。"
            width={300}
            isLoading={isLoading}
          />
          <CommonDisplayPanel
            svgIcon="UserLimitReached"
            title="大尺寸加载"
            description="大尺寸图标的加载效果。"
            width={300}
            imageSize={150}
            isLoading={isLoading}
          />
        </div>
      </div>
    </div>
  );
};

export default CommonDisplayPanelDemo;
